<template>
	<div class="aside" style="color: white">
		<transition name="fade">
			<el-menu
				:router="true"
				:collapse="isCollapse"
				:style="menuStyle"
				:background-color="backgroundColor"
				:text-color="color"
				style="height: 100%"
			>
				<span v-if="isShowLogo">
					<el-menu-item v-if="menuTitle.label" style="color: white !important">
						<img
							:src="menuTitle.imgUrl"
							width="16"
							height="16"
							style="margin: 0 10px 0 0"
						/>
						<span slot="title" v-if="!isCollapse">{{ menuTitle.label }}</span>
					</el-menu-item>
				</span>
				<span v-for="item in routers" :key="item.label">
					<el-menu-item
						v-if="item.children.length == 0"
						class="menu-item"
						@click="clickMenu(item)"
						:class="{ 'active-style': $route.path == item.path }"
					>
						<i :class="item.icon"></i>
						<span slot="title" v-if="!isCollapse">{{ item.label }}</span>
					</el-menu-item>
					<el-submenu
						:index="`/${item.path}`"
						v-else
						:style="{ color: color }"
						class="menu-item"
					>
						<template slot="title">
							<i :class="item.icon"></i>
							<span slot="title" v-if="!isCollapse">{{ item.label }}</span>
						</template>
						<el-menu-item-group>
							<el-menu-item
								v-for="cItem in item.children"
								:key="cItem.label"
								@click="clickMenu({ ...cItem, parent: item })"
								:class="{ 'active-style': $route.path == cItem.path }"
							>
								<i :class="cItem.icon"></i>
								{{ cItem.label }}
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</span>
			</el-menu>
		</transition>
	</div>
</template>

<script>
export default {
	name: "FrontAdminAside",
	props: {
		isCollapse: {
			type: Boolean,
			default: false,
		},
		routers: {
			type: Array,
			default: () => [],
		},
		menuTitle: {
			type: Object,
			default: () => {},
		},
		backgroundColor: {
			type: String,
			default: "#304156",
		},
		color: {
			type: String,
			default: "#ffffff",
		},
	},
	data() {
		return {
			height: 100,
		}
	},
	computed: {
		menuStyle() {
			return this.isCollapse ? {} : { width: "200px" }
		},
		isShowLogo() {
			return this.$store.state.globalSet.showLogo
		},
	},

	mounted() {},

	methods: {
		clickMenu(item) {
			this.$emit("click-menu", item)
		},
	},
}
</script>

<style scoped>
.active-style {
	color: rgb(17, 122, 232) !important;
}
.menu-item {
	text-align: start;
}
.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
	opacity: 0;
}
</style>
